import React from 'react';
import Footer from '@/components/footer'

const Home = () => {
    const [suggestlist, setSuggestlist] = React.useState([
        {
            id: 1,
            image_text: 'https://img.yzcdn.cn/vant/cat.jpeg',
        }
    ])
    const [productlist, setProductlist] = React.useState([
        {
            id: 1,
            thumbs_text: 'https://img.yzcdn.cn/vant/cat.jpeg',
        }
    ])
    const [caselist, setCaselist] = React.useState([])

    React.useEffect(() => {
        async function getHome() {
            let result = await React.$api.home()
            if (result && result.code == 1) {
                setSuggestlist(result.data.suggestlist)
                setProductlist(result.data.productlist)
                setCaselist(result.data.caselist)
            }
        }
        getHome()
    }, [])

    return (
        <>
            <div className="banner_shouy">
                <React.$vant.Swiper style={{ height: 230 }} autoplay={5000}>
                    {suggestlist.map((item) => (
                        <React.$vant.Swiper.Item key={item.id}>
                            <React.$router.NavLink to={`/category/info?cateid=${item.id}`}>
                                <React.$vant.Image lazyload src={item.image_text} fit="cover" />
                            </React.$router.NavLink>
                        </React.$vant.Swiper.Item>
                    ))}
                </React.$vant.Swiper>
            </div>
            <div className="shouye_kuanj">
                <React.$vant.Grid border={false}>
                    <React.$vant.Grid.Item>
                        <div className="swiper-slide">
                            <React.$router.NavLink to="/lease/add">
                                <img src="/assets/images/kj.png" alt="" /> <p>产品租赁</p>
                            </React.$router.NavLink>
                        </div>
                    </React.$vant.Grid.Item>
                    <React.$vant.Grid.Item>
                        <div className="swiper-slide"><a href="hsb.html"><img src="/assets/images/kj1.png" alt="" /> <p>我要归还</p></a></div>
                    </React.$vant.Grid.Item>
                    <React.$vant.Grid.Item>
                        <div className="swiper-slide">
                            <React.$router.NavLink to="/lease/list">
                                <img src="/assets/images/kj2.png" alt="" /> <p>商品大全</p>
                            </React.$router.NavLink>
                        </div>
                    </React.$vant.Grid.Item>
                    <React.$vant.Grid.Item>
                        <div className="swiper-slide">
                            <React.$router.NavLink to="/business/about">
                                <img src="/assets/images/kj3.png" alt="" /> <p>关于我们</p>
                            </React.$router.NavLink>
                        </div>
                    </React.$vant.Grid.Item>
                </React.$vant.Grid>
            </div>
            <div className="chan_p_center">
                <div className="shouye_biaot_k">
                    <a href="list.html">
                        <h2>租车展示</h2>
                        <p>Car rental show</p>
                        <img src="/assets/images/jiant.png" alt="" />
                    </a>
                </div>
                <div className="chanp_k_sy">
                    <div className="sjpiue_chanp_list">
                        <React.$vant.Swiper style={{ height: 150 }} autoplay={5000}>
                            {productlist.map((item) => (
                                <React.$vant.Swiper.Item key={item.id}>
                                    <React.$router.NavLink to={`/lease/info/${item.id}`}>
                                        <React.$vant.Image lazyload src={item.thumbs_text} fit="cover" />
                                    </React.$router.NavLink>
                                </React.$vant.Swiper.Item>
                            ))}
                        </React.$vant.Swiper>
                    </div>
                </div>
                <div className="lest_zx">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="/assets/images/fangh.jpg" alt="" />
                                <p>在线咨询</p>
                            </a>
                        </li>
                        <li>
                            <a href="zn.html">
                                <img src="/assets/images/fangh1.jpg" alt="" />
                                <p>使用指南</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div className="shouye_biaot_k">
                    <a href="anli.html">
                        <h2>经典案例</h2>
                        <p>Classic case</p>
                        <img src="/assets/images/jiant.png" alt="" />
                    </a>
                </div>

                <div className="list_color" >
                    <ul>
                        {
                            caselist.map((item) => {
                                return (
                                    <li key={item.id}>
                                        <React.$router.NavLink to={`/category/info?cateid=${item.id}`}>
                                            <img src={item.image_text} alt="" />
                                            <div className="right">
                                                <p>{item.name}</p>
                                                <span>{item.createtime}</span>
                                            </div>
                                        </React.$router.NavLink>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
            <div style={{ height: .75 + 'rem' }}></div>
            {/* 底部 */}
            <Footer />
        </>
    )
}

export default Home;